<template>
  <!-- 分包预留页面 -->
  <view class="pageLayout">
    <report :info="orderInfo"></report>
    <!-- <fourStatistics :info="orderInfo"></fourStatistics> -->
    <transactions
      v-if="DataTransfer"
      :title="'转化率'"
      :data="DataTransfer"
      :key="'DataTransfer'"
    ></transactions>
    <transactions
      v-if="data2"
      :title="'链接占比'"
      :data="data2"
      :key="'data2'"
    ></transactions>
  </view>
</template>

<script>
import report from "./report.vue";
import fourStatistics from "./fourStatistics.vue";
import transactions from "./transactions.vue";
import { queryFourOrderManagerStatistics } from "@/api/customer/index";
export default {
  components: {
    report,
    fourStatistics,
    transactions,
  },
  data() {
    return {
      orderInfo: {},
      DataTransfer: null,
      data2: null,
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     *
     * @param data
     */
    getCustomerInfo() {
      queryFourOrderManagerStatistics().then((res) => {
        console.log(res);
        this.orderInfo = res.data;
        this.DataTransfer = [
          {
            name: "已转化",
            value: this.orderInfo.convertRate,
          },
          {
            name: "未转化",
            value: 1 - this.orderInfo.convertRate,
          },
        ];
        this.data2 = [
          {
            name: "5000链接",
            value: this.orderInfo.fiveLinkCount,
          },
          {
            name: "1000链接",
            value: this.orderInfo.oneLinkCount,
          },
        ];
        console.log(this.data2, this.DataTransfer);
      });
    },
  },
  mounted() {
    this.getCustomerInfo();
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>
<style>
page {
  background-color: #f5f7fa;
}
</style>
<style lang="scss" scoped>
.pageLayout {
  padding: 40rpx;
}
</style>
